
import React, { useEffect, useState, useCallback } from 'react';
import { Input } from '@maycur/antd5';
import getT from '../../lib/getT';
import './SearchBar.less';

const { Search } = Input;
const prefix = 'mctable';

function debounce(func, delay) {
    let timerId;

    return function () {
        clearTimeout(timerId);

        timerId = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}


function SearchBar({ placeholder, onSearch }) {
    const handleSearch = useCallback(debounce((v) => {
        onSearch({ search: { keyword: v } }, { action: 'search' });
    }, 600), [onSearch]);
    return (
        <Search
            className={`${prefix}-search`}
            placeholder={placeholder || getT("请输入关键词搜索")}
            onSearch={handleSearch}
            onChange={(e) => {
                handleSearch(e.target.value);
            }}
        />
    )
}

export default SearchBar;